<template>
    <div id="circleMenus">
        <div class="radmenu">
            <a class="show" @click="setSelected($event)">START</a>
            <ul>
                <li>
                    <a class="" @click="setSelected($event);logout()">退出登录</a>
                </li>
                <li>
                    <a @click="setSelected($event)">我的消息</a>
                </li>
                <li>
                    <a @click="setSelected($event);upload()">更改头像</a>
                </li>
                <li>
                    <a @click="setSelected($event)">修改密码</a>
                </li>
                <li>
                    <a @click="setSelected($event);linkTo()">基本信息</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        setSelected(e) {
            if (e.target.classList.contains("selected")) {
                e.target.classList.remove("selected");
                if (!e.target.parentNode.classList.contains("radmenu")) {
                    e.target.parentNode.parentNode.parentNode.querySelector("a").classList.add("selected")
                } else {
                    e.target.classList.add("show");
                }
            } else {
                e.target.classList.add("selected");
                if (!e.target.parentNode.classList.contains("radmenu")) {
                    e.target.parentNode.parentNode.parentNode.querySelector("a").classList.remove("selected")
                } else {
                    e.target.classList.remove("show");
                }
            }
            return false;
        },
        logout() {
            setTimeout(() => {
                this.axios.get('/users/logout').then((ret) => {
                    let { data, error } = ret.data;
                    this.$router.push('/login')
                }).catch(() => { })
            }, 1500)
        },
        linkTo(){
            setTimeout(() => {
                // this.$router.push({name: 'personalcenter'})
                console.log(1);
            }, 1500)
        },
        upload(){
            setTimeout(() => {
                this.$router.push({name: 'uploadAvatar'})
                console.log(1);
            }, 1500)
        }
    }
}
</script>

<style>
@import "reset.css";
#circleMenus {
    height: 500px;
}

.radmenu {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.radmenu>a {
    top: calc(50% - 60px);
    left: calc(50% - 60px);
}

.radmenu>a.show {
    display: flex !important;
}

.radmenu li {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: all 1s ease;
}

.radmenu a {
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 120px;
    display: none;
    text-decoration: none;
    color: #333;
    transition: all 1s ease;
    box-shadow: 0 0 15px #222;
    font-family: "segoe ui";
    font-weight: 200;
    font-size: 16px;
}

.radmenu .selected {
    background: #367fa9;
    display: flex;
    top: calc(50% - 60px);
    left: calc(50% - 60px);
    color: #f1f1f1;
    box-shadow: 0 0 10px #f1f1f1;
}

.radmenu .selected+ul>li:nth-child(1) {
    -webkit-transform: rotate(72deg) translateX(100px);
    transform: rotate(72deg) translateX(100px);
}

.radmenu .selected+ul>li:nth-child(1)>a {
    -webkit-transform: rotate(-72deg);
    transform: rotate(-72deg);
}

.radmenu .selected+ul>li:nth-child(2) {
    -webkit-transform: rotate(144deg) translateX(100px);
    transform: rotate(144deg) translateX(100px);
}

.radmenu .selected+ul>li:nth-child(2)>a {
    -webkit-transform: rotate(-144deg);
    transform: rotate(-144deg);
}

.radmenu .selected+ul>li:nth-child(3) {
    -webkit-transform: rotate(216deg) translateX(100px);
    transform: rotate(216deg) translateX(100px);
}

.radmenu .selected+ul>li:nth-child(3)>a {
    -webkit-transform: rotate(-216deg);
    transform: rotate(-216deg);
}

.radmenu .selected+ul>li:nth-child(4) {
    -webkit-transform: rotate(288deg) translateX(100px);
    transform: rotate(288deg) translateX(100px);
}

.radmenu .selected+ul>li:nth-child(4)>a {
    -webkit-transform: rotate(-288deg);
    transform: rotate(-288deg);
}

.radmenu .selected+ul>li:nth-child(5) {
    -webkit-transform: rotate(360deg) translateX(100px);
    transform: rotate(360deg) translateX(100px);
}

.radmenu .selected+ul>li:nth-child(5)>a {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}

.radmenu .selected+ul>li>a {
    display: flex;
}
</style>
